<template>
  <div class="page_Introduce">
    <van-nav-bar :title="operateText" left-arrow @click-left="$router.back()"> </van-nav-bar>
    <van-field autocomplete="off" v-model="message" rows="1" autosize type="textarea" placeholder="请输入公司公告" />
    <van-uploader
      :after-read="uploadPhotoList"
      v-model="fileList"
      :max-count="9"
      :preview-options="{
        closeable: true
      }"
      @delete="toDeleteAnyPreviewPhoto"
    />
    <van-button @click="upload()" round block :color="operateColor">{{ operateText }}</van-button>
  </div>
</template>
<script>
import {Toast} from 'vant'
import {cosUploadImg} from '@/utils/cosUpload.js'

export default {
  data() {
    return {
      message: '',
      fileList: [],
      photos: '',
      photos_list_url: [],
      type: 0,
      companyId: ''
    }
  },
  async created() {
    this.type = Number(this.$route.params.id)
    const comMesRes = await this.$api.myCompany.reqGetCompanyMes()
    this.companyId = comMesRes.data.id
  },
  methods: {
    // 封装公共的上传图片函数
    async _reqUploadPicture(picture) {
      let formData = new FormData()
      formData.append('filename', picture.file)
      // 公司认证的图片
      const img_type = 'job_environment'
      // const res = await this.$api.uploadImg.uploadPhotos(formData, img_type)
      const res = await cosUploadImg(picture.file, img_type)
      if (res.code === 200) {
        return res.data
      }
    },
    // 上传图片
    uploadPhotoList(picture) {
      picture.status = 'uploading'
      picture.message = '上传中...'
      this._reqUploadPicture(picture).then(url => {
        if (!url) {
          Toast('图片上传失败!')
          picture.status = 'failed'
          picture.message = '上传失败'
        } else {
          picture.status = 'done'
        }

        // 不断的增加
        this.photos_list_url.push(url)
      })
    },
    toDeleteAnyPreviewPhoto(file, detail) {
      if (this.photos_list_url.length === 0) {
        this.photos_list_url = []
      } else {
        // splice方法会改变原始数组
        this.photos_list_url.splice(detail.index, 1)
      }
    },

    async upload() {
      if (this.message != '') {
        if (this.photos_list_url.length > 1) {
          this.photos = this.photos_list_url.join(',')
        } else {
          this.photos = this.photos_list_url[0]
        }
        const formData = {
          imgurl: this.photos,
          intro: this.message,
          type: this.type,
          company_id: this.companyId
        }
        const res = await this.$api.company.reqUpComNotice(formData)
        if (res.code == 200) {
          Toast.success(res.data)
          this.$router.back()
        }
      } else {
        Toast.fail('公司公告不能为空')
      }
    }
  },
  computed: {
    operateColor() {
      switch (this.type) {
        case 1:
          return '#36D7B7'
        default:
          return '#1989FA'
      }
    },
    operateText() {
      switch (this.type) {
        case 1:
          return '上传公告任务'
        default:
          return '上传公告通知'
      }
    }
  }
}
</script>
<style lang="less">
.page_Introduce {
  min-height: 100vh;
  background: #fff;
  .van-field {
    margin: 20px 0;
  }
  .van-uploader {
    padding: 0.26667rem 0.42667rem;
    .van-uploader__preview-image,
    .van-uploader__upload {
      width: 2.8rem;
      height: 2.8rem;
    }
  }
  .van-button {
    width: 50%;
    margin: 0 auto;
    margin-top: 30px;
  }
}
</style>
